<template>
    <div>
        {{searchMap}}
        {{tmAggs}}

        {{goodsList}}
        <el-form :inline="true" :model="searchMap" class="demo-form-inline">
            <el-form-item label="">
                <el-input v-model="searchMap.keyword" placeholder="关键词"></el-input>
            </el-form-item>
            <el-form-item label="最小价格">
                <el-input-number v-model="searchMap.minPrice"></el-input-number>
            </el-form-item>
            <el-form-item label="最大价格">
                <el-input-number v-model="searchMap.maxPrice"></el-input-number>
            </el-form-item>
            <el-form-item label="排序字段">
                 <el-select v-model="searchMap.sortField" placeholder="请选择">
                    <el-option label="price" value="price"></el-option>
                    <el-option label="title" value="title"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="排序">
                 <el-select v-model="searchMap.sortOrder" placeholder="请选择">
                    <el-option label="降序" value="desc"></el-option>
                    <el-option label="升序" value="asc"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
            <br/>
            <el-radio-group v-model="searchMap.tmName" @change="search">
                <el-radio-button :label="tmName" :key="tmName" v-for="(count,tmName) in tmAggs">
                    {{tmName + "(" + count + ")"}}
                </el-radio-button>
                <el-radio-button label="" >
                    清空
                </el-radio-button>
            </el-radio-group>
            <br/>
            <el-radio-group v-model="searchMap.category" @change="search">
                <el-radio-button :label="categoryName" :key="categoryName" v-for="(count,categoryName) in category3Aggs">
                    {{categoryName + "(" + count + ")"}}
                </el-radio-button>
                <el-radio-button label="" >
                    清空
                </el-radio-button>
            </el-radio-group>

            
        </el-form>
        <el-table
            :data="goodsList"
            style="width: 100%">
            <el-table-column
                prop="title"
                label="标题"
                width="500">
                <template slot-scope = "scope">
                    <el-link :href="scope.row.itemUrl" target="_blank">
                        <div v-html="scope.row.title" @click="clickSku(scope.row.id)"></div>
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column
                prop="tmName"
                label="品牌"
                width="120">
            </el-table-column>
             <el-table-column
                prop="category3Name"
                label="分类"
                width="180">
            </el-table-column>
            
             <el-table-column
                prop="price"
                label="价格">
            </el-table-column>
            <el-table-column
                prop="defaultImg"
                label="图片">
                <template slot-scope="scope">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.defaultImg"></el-image>
                </template>
            </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pageNo"
                :page-sizes="[2, 4, 6, 8]"
                :page-size.sync="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
    </div>
</template>

<script>
import searchApi from '../../api/gmall/search/search.js'
export default {
    data(){
        return{
            searchMap:{
                keyword:"手机",
                minPrice:100,
                maxPrice:2000,
                sortField:"price",
                sortOrder:"desc",
                tmName:'',
                category3Name:''
            },
            pageNo:1,
            pageSize:2,
            total:0,
            goodsList:[],
            tmAggs:{},//map
            category3Aggs:{}
        }
    },
    methods:{
        search(){
            searchApi.search(this.pageNo,this.pageSize,this.searchMap)
            .then(res=>{
                if(res.data){
                    this.total= res.data.data.total;
                    this.goodsList = res.data.data.goodsList;
                    this.goodsList.forEach(element => {
                        element.itemUrl = `http://item.gmall.com/item_${element.id}.html`
                    });
                    this.tmAggs = res.data.data.tmAggs;
                    this.category3Aggs = res.data.data.category3Aggs;
                }
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.search();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
             this.search();
        },
        clickSku(skuId){
            searchApi.clickSku(skuId).then(res=>{
                alert(res.data.data)
            })
        }
    },
    mounted(){
        this.search();
    }
}
</script>

<style>

</style>


